<template>
  <div class="left-chart-1">
    <div class="lc1-details">
      <div>
        当前班组：<span>{{ groupName }}</span>
      </div>
      <div>
        应到：<span>{{ arriveCount }}人</span>
      </div>
      <div>
        实到：<span>{{ signInCount }}人</span>
      </div>
      <div>
        接班时间：<span>{{ workStartTime }}</span>
      </div>
    </div>
    <dv-scroll-board v-if="config.data" :config="config" class="lc1-chart" />
    <div v-else class="no-data">暂无数据</div>
  </div>
</template>

<script>
export default {
  name: "LeftChart1",
  props: {
    lineItem: {
      type: Object,
      default: null,
    },
    data: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      groupName: "",
      arriveCount: "",
      signInCount: "",
      workStartTime: "",
      config: {},
    };
  },
  methods: {},
  watch: {
    data: {
      handler(newVal) {
        if (newVal) {
          let configdata = [];
          let row1 = [];
          const num =
            newVal.data.length % 4 == 0
              ? newVal.data.length
              : newVal.data.length + (4 - (newVal.data.length % 4));
          for (let i = 0; i < num; i++) {
            const ele = newVal.data[i];
            row1.push(
              `<div class="head">
                <span>${ele?.workStationName || ""}</span>
              </div>
              <div class="body"><span>${ele?.realname || ""}</span></div>`
            );
            if (i > 0 && i % 4 == 3) {
              configdata.push(row1);
              row1 = [];
            }
          }
          this.config = {
            data: configdata,
            rowNum: 2,
          };
          this.groupName = newVal.groupName;
          this.arriveCount = newVal.arriveCount;
          this.signInCount = newVal.signInCount;
          this.workStartTime = newVal.workStartTime;
        } else {
          this.config = {};
          this.groupName = "";
          this.arriveCount = "";
          this.signInCount = "";
          this.workStartTime = "";
        }
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
.left-chart-1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-grow: 0;
  flex-direction: column;
  font-size: 15px;

  .lc1-details {
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-flow: wrap;
    margin-bottom: 10px;
    margin-top: 40px;
  }

  .lc1-chart {
    flex: 1;
  }
  ::v-deep .dv-scroll-board {
    .rows .row-item {
      line-height: unset !important;
    }
    .ceil {
      padding: 0;
      .head,
      .body {
        width: 100%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 3px;
        span {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .head {
        background: #050f67;
      }
      .body {
        background: #053a6d;
      }
    }
  }
}
.no-data {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  opacity: 0.6;
}
</style>
